<template>
  <div class="second-hand-book-home">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="校园二手书" fixed />
    
    <!-- 轮播图 -->
    <van-swipe class="home-swipe" :autoplay="3000" indicator-color="#8b4513">
      <van-swipe-item v-for="(image, index) in swipeImages" :key="index">
        <img :src="image" alt="轮播图" class="swipe-image" />
      </van-swipe-item>
    </van-swipe>
    
    <!-- 功能入口模块（可翻页） -->
    <div class="menu-section">
      <h3 class="section-title">
        <van-icon name="apps-o" color="#8b4513" /> 功能入口
      </h3>
      
      <!-- 功能入口翻页容器 -->
      <van-swipe 
        :autoplay="0" 
        @change="handleFuncSwipeChange" 
        class="func-swipe"
        ref="funcSwipe"
      >
        <van-swipe-item v-for="(page, pageIndex) in funcPages" :key="pageIndex">
          <van-grid :border="false" :column-num="4" clickable>
            <van-grid-item 
              v-for="(item, index) in page" 
              :key="index" 
              :text="item.text" 
              :to="item.to"
              @click="handleFuncClick(item)"
            >
              <template #icon>
                <div class="category-icon">
                  <van-icon :name="item.iconName" size="24" color="#8b4513" />
                </div>
              </template>
            </van-grid-item>
          </van-grid>
        </van-swipe-item>
      </van-swipe>
      
      <!-- 分页指示器 -->
      <div class="func-pagination" v-if="funcPages.length > 1">
        <span 
          v-for="(page, index) in funcPages" 
          :key="index" 
          :class="{ active: currentFuncPage === index }"
          @click="scrollToFuncPage(index)"
        ></span>
      </div>
    </div>
    
    <!-- 特价专区 -->
    <div class="special-offer">
      <h3 class="section-title">
        <van-icon name="fire-o" color="#e53e3e" /> 特价专区
      </h3>
      <van-row :gutter="10" class="book-list">
        <van-col span="12" v-for="(book, index) in specialOffers" :key="index">
          <div class="book-item" @click="goToDetail(book)">
            <van-image :src="book.pic" width="100%" height="140" fit="cover" radius="4" />
            <div class="book-title">{{ book.title }}</div>
            <div class="book-price">￥{{ book.price }} <span class="original-price">￥{{ book.originalPrice }}</span></div>
          </div>
        </van-col>
      </van-row>
    </div>
    
    <!-- 近新好书 -->
    <div class="new-books">
      <h3 class="section-title">
        <van-icon name="star-o" color="#ed8936" /> 近新好书
      </h3>
      <van-row :gutter="10" class="book-list">
        <van-col span="12" v-for="(book, index) in newBooks" :key="index">
          <div class="book-item" @click="goToDetail(book)">
            <van-image :src="book.pic" width="100%" height="140" fit="cover" radius="4" />
            <div class="book-title">{{ book.title }}</div>
            <div class="book-price">￥{{ book.price }}</div>
          </div>
        </van-col>
      </van-row>
    </div>
    
    <!-- 底部固定区域 -->
    <div class="bottom-nav">
      <van-tabbar route>
        <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";

export default {
  data() {
    return {
      // 轮播图
      swipeImages: [
        "https://picsum.photos/750/300?random=1",
        "https://picsum.photos/750/300?random=2",
        "https://picsum.photos/750/300?random=3"
      ],
      
      // 功能入口项
      funcItems: [
        { iconName: "photo-o", text: "扫码卖书", to: "/sell" },
        { iconName: "balance-list-o", text: "我的订单", to: "/order/list" },
        { iconName: "star-o", text: "我的收藏", to: "/favorite" },
        { iconName: "contact-o", text: "联系我们", to: "/contact" },
        { iconName: "chat-o", text: "交流论坛", to: "/chat" },
        { iconName: "book-o", text: "文学小说", to: "/literatureNovel" },
        { iconName: "notes-o", text: "教材教辅", to: "/category/textbook" }
      ],
      
      // 分页相关
      currentFuncPage: 0,
      funcPages: [],
      pageSize: 4, // 每页显示4个
      
      // 特价专区
      specialOffers: [
        { id: 1, title: "高等数学（第七版）", price: 15.00, originalPrice: 39.00, pic: "https://picsum.photos/300/400?random=10" },
        { id: 2, title: "百年孤独", price: 20.00, originalPrice: 39.50, pic: "https://picsum.photos/300/400?random=11" },
        { id: 3, title: "C语言程序设计", price: 12.00, originalPrice: 45.00, pic: "https://picsum.photos/300/400?random=12" },
        { id: 4, title: "小王子", price: 8.00, originalPrice: 22.00, pic: "https://picsum.photos/300/400?random=13" }
      ],
      
      // 近新好书
      newBooks: [
        { id: 101, title: "三体", price: 30.00, pic: "https://picsum.photos/300/400?random=20" },
        { id: 102, title: "线性代数", price: 18.00, pic: "https://picsum.photos/300/400?random=21" },
        { id: 103, title: "活着", price: 15.00, pic: "https://picsum.photos/300/400?random=22" },
        { id: 104, title: "计算机网络", price: 25.00, pic: "https://picsum.photos/300/400?random=23" }
      ]
    };
  },
  
  methods: {
    // 处理功能入口翻页
    handleFuncSwipeChange(index) {
      this.currentFuncPage = index;
    },
    
    // 跳转到指定功能页
    scrollToFuncPage(index) {
      this.$refs.funcSwipe.scrollTo(index);
      this.currentFuncPage = index;
    },
    
    // 功能项点击处理
    handleFuncClick(item) {
      console.log(`点击了${item.text}，跳转到${item.to}`);
      // 可以添加统计或其他逻辑
    },
    
    // 跳转到详情页
    goToDetail(book) {
      this.$router.push({
        path: '/book-detail',
        query: { id: book.id }
      });
    }
  },
  
  created() {
    // 初始化功能入口分页
    this.funcPages = [];
    for (let i = 0; i < this.funcItems.length; i += this.pageSize) {
      this.funcPages.push(this.funcItems.slice(i, i + this.pageSize));
    }
  }
};
</script>

<style lang="less" scoped>
.second-hand-book-home {
  padding-top: 46px;
  background-color: #f9f5ed;
  padding-bottom: 50px;
}

// 轮播图样式
.home-swipe {
  width: 100%;
  height: 180px;
  
  .swipe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// 通用区域标题
.section-title {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 15px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 6px;
}

// 功能入口样式
.menu-section {
  background-color: white;
  margin: 10px;
  border-radius: 8px;
  padding-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  
  .func-swipe {
    height: 180px;
    padding: 0 10px;
    
    /deep/ .van-swipe-item {
      height: 100%;
      display: flex;
      align-items: center;
    }
  }
  
  .category-icon {
    width: 48px;
    height: 48px;
    background-color: #f5e8d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /deep/ .van-grid-item {
    padding: 10px 0;
    
    &__text {
      color: #8b4513;
      margin-top: 8px;
      font-size: 14px;
    }
  }
  
  .func-pagination {
    display: flex;
    justify-content: center;
    margin-top: 5px;
    
    span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #ddd;
      margin: 0 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &.active {
        background-color: #8b4513;
        width: 24px;
        border-radius: 4px;
      }
    }
  }
}

// 书籍列表通用样式
.book-list {
  padding: 0 10px 15px;
  
  .book-item {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    
    .book-title {
      padding: 8px;
      font-size: 14px;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .book-price {
      padding: 0 8px 8px;
      color: #f44;
      font-weight: bold;
      font-size: 15px;
      
      .original-price {
        color: #999;
        text-decoration: line-through;
        font-size: 12px;
        font-weight: normal;
        margin-left: 5px;
      }
    }
  }
}

// 特价专区
.special-offer {
  background-color: white;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

// 近新好书
.new-books {
  background-color: white;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

// 底部导航
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 10;
  
  /deep/ .van-tabbar {
    height: 50px;
  }
  
  /deep/ .van-tabbar-item {
    color: #999;
    
    &--active {
      color: #8b4513;
    }
  }
}
</style>
